<template>
    <div class="certification">
        <div class="title">
            <h1>实名认证</h1>
        </div>
        <div class="tip">
            <span>
                <svg t="1733737374337" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="24265" width="16" height="16">
                    <path
                        d="M512 128c212 0 384 172 384 384s-172 384-384 384-384-172-384-384 172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z"
                        p-id="24266"></path>
                    <path d="M480 704h64v64h-64zM480 256h64v384h-64z" p-id="24267"></path>
                </svg>
            </span>
            <span class="tip-wenzi">
                完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
            </span>
        </div>
        <div class="form" v-if="userInfo?.authStatus == 0">
            <Form :cardType="cardType" @getUserInfo="getUserInfo" />
        </div>
        <div class="description" v-else>
            <Description :userInfo="userInfo" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Form from './form.vue';
import Description from './description.vue';
import { useUserInfo } from './composables/useUserInfo';
import { onMounted } from 'vue';

let { userInfo, cardType, getUserInfo } = useUserInfo()

onMounted(() => getUserInfo())
</script>

<style scoped lang="scss">
.certification {

    .title {
        h1 {
            font-weight: bold;
        }
    }

    .tip {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        margin-top: 30px;
        font-size: 13px;

        .tip-wenzi {
            margin-left: 5px;
            line-height: 22px;
            letter-spacing: 1px;
        }
    }
}
</style>